<template>
  <a-modal :title="form.id ? '编辑' : '添加'" :width="800" v-model:visible="visible" @ok="onSubmit">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <a-form-item label="姓名" name="displayName">
        <a-input-search v-model:value="form.displayName" enter-button="选择" @search="openUserTable" />
      </a-form-item>
      <a-form-item label="登录账号" name="username">
        <a-input v-model:value="form.username" disabled />
      </a-form-item>
      <a-form-item label="策略名称" name="strategyName">
        <a-input-search v-model:value="form.strategyName" enter-button="选择" @search="openStrategyTable" />
      </a-form-item>
      <a-form-item label="应用名称" name="appName">
        <a-input v-model:value="form.appName" disabled />
      </a-form-item>
      <a-form-item label="应用账号" name="relatedUsername">
        <a-input-search v-model:value="form.relatedUsername"/>
        <!-- <a-input-search v-model:value="form.relatedUsername" enter-button="生成" @search="getGenerate"/> -->
      </a-form-item>
      <a-form-item label="应用密码" name="relatedPassword">
        <!-- <a-row> -->
          <!-- <a-col :span="20"> -->
            <div style="display: flex; margin-left: 8px">
            <a-input-password style="width: 100%" v-model:value="form.relatedPassword" placeholder="input password" />
          <!-- </a-col> -->
          <!-- <a-col :span="4"> -->
            <a-button type="primary" @search="getrandomPassword">生成</a-button>
        </div>
          <!-- </a-col> -->
        <!-- </a-row> -->
        <!-- <a-input-search v-model:value="form.relatedPassword" enter-button="生成" @search="getrandomPassword" /> -->
      </a-form-item>
    </a-form>
  </a-modal>
  <UserTableSelection ref="userTableSelectionRef" @change="userTableChange" />
  <StrategyTable ref="strategyTableSelectionRef" @change="strategyTableChange" />
</template>
<script setup>
import { ref, nextTick, reactive } from 'vue';
import { message } from 'ant-design-vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import _ from 'lodash';
import { smartSentry } from '/@/lib/smart-sentry';
import UserTableSelection from '/@/components/tableSelection/userTable.vue';
import StrategyTable from '/@/components/tableSelection/strategyTable.vue';
import { accountmentapi } from '/@/api/system/accountment';

// emit
const emit = defineEmits(['reloadList']);

// 组件ref
const formRef = ref();
const formDefault = {
  id: '',
  appId: '',
  appName: '',
  createType: '',
  displayName: '',
  relatedPassword: '',
  relatedUsername: '',
  sortIndex: '',
  status: '',
  strategyId: '',
  strategyName: '',
  switch_status: true,
  userId: '',
  username: '',
};
let form = reactive({ ...formDefault });
const rules = {
  categoryId: [{ required: true, message: '请选择商品分类' }],
  goodsName: [{ required: true, message: '商品名称不能为空' }],
  goodsStatus: [{ required: true, message: '商品状态不能为空' }],
  price: [{ required: true, message: '商品价格不能为空' }],
  place: [{ required: true, message: '产地不能为空' }],
};
// 是否展示抽屉
const visible = ref(false);

function showDrawer(rowData) {
  Object.assign(form, formDefault);
  if (rowData) {
    form.id = rowData.id;
    accountmentapi.info(form.id).then((res) => {
      Object.assign(form, res.data);
    });
  }
  visible.value = true;
  nextTick(() => {
    formRef.value.clearValidate();
  });
}

function onClose() {
  Object.assign(form, formDefault);
  visible.value = false;
}
function onSubmit() {
  formRef.value
    .validate()
    .then(async () => {
      SmartLoading.show();
      try {
        if (form.id) {
          await accountmentapi.update(form);
        } else {
          await accountmentapi.add(form);
        }
        message.success(`${form.id ? '修改' : '添加'}成功`);
        onClose();
        emit('reloadList');
      } catch (error) {
        smartSentry.captureError(error);
      } finally {
        SmartLoading.hide();
      }
    })
    .catch((error) => {
      console.log('error', error);
      message.error('参数验证错误，请仔细填写表单数据!');
    });
}
const userTableSelectionRef = ref(null);
function openUserTable() {
  userTableSelectionRef.value.showModal();
}
const strategyTableSelectionRef = ref(null);
function openStrategyTable() {
  strategyTableSelectionRef.value.showModal();
}
function userTableChange(data) {
  form.displayName = data[0].displayName;
  form.username = data[0].username;
  form.userId = data[0].id;
  console.log(data[0], form.userId);
  if (form.strategyId && form.userId) {
    getGenerate();
    getrandomPassword();
  }
}
function strategyTableChange(data) {
  form.strategyName = data[0].name;
  form.appId = data[0].appId;
  form.appName = data[0].appName;
  form.createType = data[0].createType;
  form.strategyId = data[0].id;
  if (form.strategyId && form.userId) {
    getGenerate();
    getrandomPassword();
  }
}

function getGenerate() {
  if (form.strategyId && form.userId) {
    accountmentapi
      .generate({
        strategyId: form.strategyId,
        userId: form.userId,
      })
      .then((res) => {
        form.relatedUsername = res.data;
      });
  }
}
function getrandomPassword() {
  accountmentapi.randomPassword().then((res) => {
    form.relatedPassword = res.data;
  });
}
defineExpose({
  showDrawer,
});
</script>